import React, { Component } from "react";
import {Form,Input,Select,Table,Divider,Button,Modal,DatePicker,Row,Col,Upload, Popconfirm} from "antd";
import Content from "../../components/Content/Content";
import moment from "moment";
import Search from "antd/lib/input/Search";

const { Item } = Form;
const { confirm } = Modal;
const { Option } = Select;
const { TextArea } = Input;
const InputGroup = Input.Group;
const RangePicker=DatePicker;


//表格内容数据
const dataSource = [];
for (let i = 0; i < 30; i++) {
  dataSource.push({
    id: i,
    name: `AACC000${i}`,
    number: `${i}`,
    date: `2019/9/${i}`,
    age4: `AACC000${i}`
  });
}

class Query_mediumForm extends Component {
  state = {
    dataSource: dataSource,
    count: 0,

    viewData: {},
    editData: {},
    newData: {},
    searchParams: {},

    filteredInfo: null,
    sortedInfo: null,
    selectedRowKeys: [],

    loading_out_to_first: false,
    loading_out_to_local: false,

    showViewModal: false,
    showEditModal: false,
    showAddModal: false
  };

  handleChange = (pagination, filters, sorter) => {
    console.log("Various parameters", pagination, filters, sorter);
    this.setState({
      filteredInfo: filters,
      sortedInfo: sorter
    });
  };

  onSelectChange = selectedRowKeys => {
    console.log("selectedRowKeys changed: ", selectedRowKeys);
    this.setState({ selectedRowKeys });
  };

  //导出到初筛
  outToFirst = () => {
    this.setState({ loading_out_to_first: true });
    // ajax request after empty completing
    setTimeout(() => {
      this.setState({
        selectedRowKeys: [],
        loading_out_to_first: false
      });
    }, 1000);

    let selectedRowKeys = this.state.selectedRowKeys;
    if(selectedRowKeys) {
      for( let x of selectedRowKeys ) {
        let record = this.state.dataSource[x];
        let id = record.id;
        // TODO 跳转到导出URL
      }
    }   

  };
  
  // 导出到本地
  outToLocal = () => {
    this.setState({ loading_out_to_local: true });
    // ajax request after empty completing
    setTimeout(() => {
      this.setState({
        selectedRowKeys: [],
        loading_out_to_local: false
      });
    }, 1000);

    let selectedRowKeys = this.state.selectedRowKeys;
    if(selectedRowKeys) {
      for( let x of selectedRowKeys ) {
        let record = this.state.dataSource[x];
        let id = record.id;
        // TODO 跳转到导出URL
      }
    }   

  };

  //Modal
  showViewModal(showViewModal, viewData = {}) {
    this.setState({ showViewModal, viewData: viewData });
  }
  showEditModal(showEditModal, editData ={}) {
    this.setState({ showEditModal, editData: editData });
  }
  showAddModal(showAddModal) {
    this.setState({ showAddModal, newData: {} });
  }

  // 删除
  handleDelete = (id) => {
    const dataSource = [...this.state.dataSource];

    const url = global.api.compoundInfo + id + '/';
    return global.deletedata.del(url, {})
    .then(res => {  
      this.setState({ dataSource: dataSource.filter(item => item.id !== id)});
      Modal.success({
        content: '删除成功!',
      });
    })
    .catch(err => {
      Modal.error({
        content: '删除出错!',
      });
    })    
  }

  // 更新
  handleUpdate = () => {
    let record = this.state.newData;
    
    if( record.provider_email.indexOf('@') == -1 ) {
      Modal.error({
        content: '邮箱格式不对！'
      })
      return false;
    }


    record.spectrogram_info = document.getElementById('spectrogram_info_edit').files[0];
    record.compound_structure = document.getElementById('compound_structure_edit').files[0];



    const formData = new FormData();
    Object.keys(record).forEach((key) => {
      formData.append(key, record[key]);
    });

    const url = global.api.compoundInfo + this.state.editData.id + '/';
    return global.updatedata.put(url, formData)
    .then(res => {  
      Modal.success({
        content: '更新成功!',
      });
    })
    .catch(err => {
      Modal.error({
        content: '更新出错!',
      });
    })    
  }

  // 保存
  handleAdd = () => {
    
    let record = this.state.newData;

    if( record.provider_email.indexOf('@') == -1 ) {
      Modal.error({
        content: '邮箱格式不对！'
      })
      return false;
    }

    record.spectrogram_info = document.getElementById('spectrogram_info_new').files[0];
    record.compound_structure = document.getElementById('compound_structure_new').files[0];


    const formData = new FormData();
    Object.keys(record).forEach((key) => {
      formData.append(key, record[key]);
    });

    const url = global.api.compoundInfo;
    return global.network.post(url, formData)
    .then(res => {  
      this.setState({newData: {}});
      this.loadData(1);
      Modal.success({
        content: '保存成功!',
      });
    })
    .catch(err => {
      Modal.error({
        content: '保存出错!',
      });
    })    
  }

  loadData = (current = 1) => {

    this.setState({ loading: true });
    // ajax request after empty completing
    setTimeout(() => {
      this.setState({
        selectedRowKeys: [],
        loading: false
      });
    }, 1000);

    const url = global.api.compoundInfo
    + "?compound_remark=" + (this.state.searchParams.compound_remark || "")
    + "&compound_son_place=" + (this.state.searchParams.compound_son_place || "")
    + "&compound_mom_place=" + (this.state.searchParams.compound_mom_place || "")
    + "&compound_purity_unit=" + (this.state.searchParams.compound_purity_unit || "")
    + "&compound_purity=" + (this.state.searchParams.compound_purity || "")
    + "&compound_weight_unit=" + (this.state.searchParams.compound_weight_unit || "")
    + "&compound_concentration=" + (this.state.searchParams.compound_concentration || "")
    + "&compound_weight=" + (this.state.searchParams.compound_weight || "")
    + "&compound_cd=" + (this.state.searchParams.compound_cd || "")
    + "&provider_tel=" + (this.state.searchParams.provider_tel || "")
    + "&provider_email=" + (this.state.searchParams.provider_email || "")
    + "&provider=" + (this.state.searchParams.provider || "")
    + "&provider_unit=" + (this.state.searchParams.provider_unit || "")
    + "&compound_intime=" + (this.state.searchParams.compound_intime || "")
    + "&compound_activity=" + (this.state.searchParams.compound_activity || "")
    + "&spectrogram_info=" + (this.state.searchParams.spectrogram_info || "")
    + "&f_tj=" + (this.state.searchParams.f_tj || "")
    + "&f_pyjid=" + (this.state.searchParams.f_pyjid || "")
    + "&jzbc_id=" + (this.state.searchParams.jzbc_id || "")
    + "&compound_type=" + (this.state.searchParams.compound_type || "")
    + "&compound_jglx=" + (this.state.searchParams.compound_jglx || "")
    + "&compound_fzl=" + (this.state.searchParams.compound_fzl || "")
    + "&compound_fzs=" + (this.state.searchParams.compound_fzs || "")
    + "&compound_structure=" + (this.state.searchParams.compound_structure || "")
    + "&compound_english=" + (this.state.searchParams.compound_english || "")
    + "&compound_chinese=" + (this.state.searchParams.compound_chinese || "")
    + "&hhw_original_id=" + (this.state.searchParams.hhw_original_id || "")
    + "&hhw_id=" + (this.state.searchParams.hhw_id || "")
    + "&id=" + (this.state.searchParams.id || "")
    + "&sxjj_id=" + (this.state.searchParams.sxjj_id || "");

    return global.getdata.get(url, {page_index: current, page_size: this.state.pageSize, search: {}})
    .then(res => {
      this.setState({dataSource: res.results, count: res.count})
    })
    .catch(err => {
      Modal.error({
        content: '网络异常!',
      });
    }) 

  }

  componentDidMount() {
    this.loadData(1);
  }

  // compound_structure
  changeFileCompoundStructure  = (fileList) => {
    console.info(fileList)

    let editData = this.state.editData;
    let newData = this.state.newData;

    newData.compound_structure = fileList[0];
    editData.compound_structure = fileList[0];

    this.setState({ editData: editData, newData: newData });
  };
  // spectrogram_info
  changeFileSpectrogramInfo  = (fileList) => {
    console.info(fileList)

    let editData = this.state.editData;
    let newData = this.state.newData;

    newData.spectrogram_info = fileList[0];
    editData.spectrogram_info = fileList[0];

    this.setState({ editData: editData, newData: newData });
  };
  selectFile = (env, prefix, idx) => {
    let files = env.target.files;
    let filename = files[0].name;
    document.getElementById(prefix).value = filename;
  }
  
  beforeUpload  = () => {
    return false;
  };

  render() {
    let { sortedInfo, filteredInfo } = this.state;
    sortedInfo = sortedInfo || {};
    filteredInfo = filteredInfo || {};

    const formItemLayoutt = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 }
      }
    };
    //表格表头数据
    const columns = [
      {
        title: "编号",
        fixed: "left",
        key: "id",
        width: 120,
        dataIndex: "id"
      },      
      {
        title: "化合物编号",
        key: "hhw_id",
        dataIndex: "hhw_id",
        fixed: "left",
        width: 200,
        sorter: (a, b) => a.number - b.number,
        sortOrder: sortedInfo.columnKey === "hhw_id" && sortedInfo.order
      },
      {
        title: "化合物原编号",
        fixed: "left",
        width: 200,
        key: "hhw_original_id",
        dataIndex: "hhw_original_id"
      },
      {
        title: "化合物中文名称",
        fixed: "left",
        width: 200,
        key: "compound_chinese",
        dataIndex: "compound_chinese"
      },
      {
        title: "化合物英文名称",
        key: "compound_english",
        dataIndex: "compound_english"
      },
      {
        title: "化合物结构式",
        key: "compound_structure",
        dataIndex: "compound_structure"
      },
      {
        title: "化合物分子式",
        key: "compound_fzs",
        dataIndex: "compound_fzs"
      },
      {
        title: "化合物分子量",
        key: "compound_fzl",
        dataIndex: "compound_fzl"
      },
      {
        title: "化合物CAS号",
        key: "compound_cas",
        dataIndex: "compound_cas"
      },
      {
        title: "结构类型",
        key: "compound_jglx",
        dataIndex: "compound_jglx"
      },
      {
        title: "化合物来源",
        key: "compound_type",
        dataIndex: "compound_type"
      },
      {
        title: "筛选菌株编号",
        key: "sxjj_id",
        dataIndex: "sxjj_id"
      },
      {
        title: "菌株保藏编号",
        key: "jzbc_id",
        dataIndex: "jzbc_id"
      },
      {
        title: "发酵培养基",
        key: "f_pyjid",
        dataIndex: "f_pyjid"
      },
      {
        title: "发酵条件",
        key: "f_tj",
        dataIndex: "f_tj"
      },
      {
        title: "谱图信息",
        key: "spectrogram_info",
        dataIndex: "spectrogram_info"
      },
      {
        title: "化合物药理活性",
        key: "compound_activity",
        dataIndex: "compound_activity"
      },
      {
        title: "入库时间",
        key: "compound_intime",
        dataIndex: "compound_intime"
      },
      {
        title: "提供者单位",
        key: "provider_unit",
        dataIndex: "provider_unit"
      },
      {
        title: "提供者",
        key: "provider",
        dataIndex: "provider"
      },
      {
        title: "提供者电子邮箱",
        key: "provider_email",
        dataIndex: "provider_email"
      },
      {
        title: "提供者电话",
        key: "provider_tel",
        dataIndex: "provider_tel"
      },
      {
        title: "化合物纯度",
        key: "compound_cd",
        dataIndex: "compound_cd"
      },
      {
        title: "化合物重量",
        key: "compound_weight",
        dataIndex: "compound_weight"
      },
      {
        title: "化合物浓度",
        key: "compound_concentration",
        dataIndex: "compound_concentration"
      },
      {
        title: "化合物体积",
        key: "compound_purity",
        dataIndex: "compound_purity"
      },
      {
        title: "母板存放位置",
        key: "compound_mom_place",
        dataIndex: "compound_mom_place"
      },
      {
        title: "子板存放位置",
        key: "compound_son_place",
        dataIndex: "compound_son_place"
      },
      {
        title: "备注",
        key: "compound_remark",
        dataIndex: "compound_remark"
      },
      {
        title: "工作人员姓名",
        key: "worker",
        dataIndex: "worker"
      },
      {
        title: "入库时间",
        key: "compound_intime",
        dataIndex: "compound_intime",
        sorter: (a, b) =>
          a.date.replace(/[^\d.]/g, "") - b.date.replace(/[^\d.]/g, ""),
        sortOrder: sortedInfo.columnKey === "compound_intime" && sortedInfo.order
      },
      {
        title: "操作",
        dataIndex: "caozuo",
        fixed: "right",
        width: 300,
        render: (text, record) => (
          <span>
            <Button type="dashed" onClick={() => this.showViewModal(true, record)}>
              查看
            </Button>
            <Divider type="vertical" />
            <Button type="dashed" onClick={() => this.showEditModal(true, record)}>
              修改
            </Button>
            <Divider type="vertical" />
            <Popconfirm title="确认删除吗?" onConfirm={() => this.handleDelete(record.id)}>
                <Button type="dashed" >删除</Button>
            </Popconfirm>
          </span>
        )
      }
    ];

    //全部选中/取消全选
    const { loading_out_to_first, loading_out_to_local, selectedRowKeys, count } = this.state;
    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange,
      hideDefaultSelections: true,
      selections: [
        {
          key: "allData",
          text: "全部选中",
          onSelect: () => {
            this.setState({
              selectedRowKeys: [...Array(count).keys()] // 0...29
            });
          }
        },
        {
          key: "nullData",
          text: "取消全选",
          onSelect: changableRowKeys => {
            let newSelectedRowKeys = [];
            newSelectedRowKeys = changableRowKeys.filter((key, index) => {
              return false;
            });
            this.setState({ selectedRowKeys: newSelectedRowKeys }); 
          }
        }
      ]
    };

    const hasSelected = selectedRowKeys.length > 0;
   
    return (
      <div>
        <Form
          {...formItemLayoutt}
          onSubmit={this.onSubmit}
          colon={false}
          style={{ borderBottom: "20px solid #f0f2f5" }}
        >
          <div style={{ display: "flex" }}>
            <span style={{ flex: 1 }}>
              <Item label="任务编号">
                <Input onChange={e => this.state.searchParams.id = e.target.value} />
              </Item>
              <Item label="化合物编号">
                <Input onChange={e => this.state.searchParams.hhw_id = e.target.value} />
              </Item>
              <Item label="化合物原编号">
                <Input onChange={e => this.state.searchParams.hhw_original_id = e.target.value} />
              </Item>
              <Item label="化合物中文名称">
                <Input onChange={e => this.state.searchParams.compound_chinese  = e.target.value} />
              </Item>
              <Item label="化合物英文名称">
                <Input onChange={e => this.state.searchParams.compound_english  = e.target.value} />
              </Item>
              <Item label="化合物结构式">
                <Input onChange={e => this.state.searchParams.compound_structure  = e.target.value} />
              </Item>
            </span>
 
            <span style={{ flex: 1 }}>             
              <Item label="化合物分子式">
                <Input onChange={e => this.state.searchParams.compound_fzs   = e.target.value} />
              </Item>
              <Item label="化合物分子量">
                <Input onChange={e => this.state.searchParams.compound_fzl   = e.target.value} />
              </Item>
              <Item label="结构类型">
                <Input onChange={e => this.state.searchParams.compound_jglx  = e.target.value} />
              </Item>
              <Item label="化合物来源">
                <Input onChange={e => this.state.searchParams.compound_type   = e.target.value} />
              </Item>
              <Item label="筛选菌株编号">
                <Input onChange={e => this.state.searchParams.sxjj_id  = e.target.value} />
              </Item>
              <Item label="菌株保藏编号">
                <Input onChange={e => this.state.searchParams.jzbc_id  = e.target.value} />
              </Item>
            </span>
            <span style={{ flex: 1 }}>
              <Item label="发酵培养基">
                <Input onChange={e => this.state.searchParams.f_pyjid  = e.target.value} />
              </Item>
              <Item label="发酵条件">
                <Input onChange={e => this.state.searchParams.f_tj   = e.target.value} />
              </Item>
              <Item label="谱图信息">
                <Input onChange={e => this.state.searchParams.spectrogram_info   = e.target.value} />
              </Item>
              <Item label="化合物药理活性">
                <TextArea autosize onChange={e => this.state.searchParams.compound_activity  = e.target.value} />
              </Item>
              <Item label="入库时间">
                <DatePicker
                  onChange={(date, dateString) => this.state.searchParams.compound_intime  = dateString}
                  style={{ width: "100%" }}
                  placeholder={[" ", ""]}
                />
              </Item>
              <Item label="提供者单位">
                <TextArea autosize onChange={e => this.state.searchParams.provider_unit = e.target.value} />
              </Item>
            </span>

            <span style={{ flex: 1 }}>
              <Item label="提供者">
                <Input onChange={e => this.state.searchParams.provider = e.target.value} />
              </Item>
              <Item label="提供者电子邮箱">
                <Input onChange={e => this.state.searchParams.provider_email = e.target.value} />
              </Item>
              <Item label="提供者电话">
                <Input onChange={e => this.state.searchParams.provider_tel = e.target.value} />
              </Item>
              <Item label="化合物纯度">
                <Select
                  // mode="tags"
                  onChange={value => this.state.searchParams.compound_cd  = value}
                  style={{ width: "100%" }}
                  tokenSeparators={[","]}
                  showArrow={true}
                >
                  <Option value="95">95%</Option>
                  <Option value="90">90%</Option>
                  <Option value="85">85%</Option>
                  <Option value="80">80%</Option>
                </Select>
              </Item>
              <Item label="化合物重量">
                <Input style={{ width: "56%" }} onChange={e => this.state.searchParams.compound_weight = e.target.value} />
                <InputGroup compact style={{ width: "44%" }}>
                  <Select 
                    style={{ width: "100%" }}
                    onChange={value => this.state.searchParams.compound_weight_unit = value}>
                    <Option value="mg">mg</Option>
                    <Option value="g">g</Option>
                  </Select>
                </InputGroup>
              </Item>
              <Item label="化合物浓度">
                <Select
                  // mode="tags"
                  onChange={value => this.state.searchParams.compound_concentration = value}
                  style={{ width: "100%" }}
                  tokenSeparators={[","]}
                  showArrow={true}
                >
                  <Option value="128">12.8mg/ml%</Option>
                  <Option value="64">6.4mg/ml%</Option>
                  <Option value="32">3.2mg/ml%</Option>
                  <Option value="16">1.6 mg/ml%</Option>
                  <Option value="100">100mM</Option>
                  <Option value="10">10mM</Option>
                </Select>
              </Item>
            </span>
            <span style={{ flex: 1 }}>
             
              <Item label="化合物体积">
                <Input style={{ width: "60%" }} onChange={e => this.state.searchParams.compound_purity = e.target.value} />
                <InputGroup compact style={{ width: "40%" }}>
                  <Select 
                     style={{ width: "100%" }}
                    onChange={value => this.state.searchParams.compound_purity_unit = value}>
                    <Option value="ul">μl</Option>
                    <Option value="l">l</Option>
                  </Select>
                </InputGroup>
              </Item>

              <Item label="母板存放位置">
                <Input onChange={e => this.state.searchParams.compound_mom_place  = e.target.value} />
              </Item>
              <Item label="子板存放位置">
                <Input onChange={e => this.state.searchParams.compound_son_place  = e.target.value} />
              </Item>
              <Item label="备注">
                <Input onChange={e => this.state.searchParams.compound_remark  = e.target.value} />
              </Item>
            </span>
          </div>
          <Item
            wrapperCol={{ span: 10, offset: 2 }}
          >
            <Row guuter={16}>
              <Col span={5}>
                <Button onClick={()=>this.loadData(1)} type="primary" loading={this.state.loading}>
                  精确查询
                </Button>
              </Col>
              <Col span={5}>
              </Col>
              <Col span={5}>
               
              </Col>
            </Row>
          </Item>
        </Form>

        <Button
          type="primary"
          onClick={this.outToFirst}
          disabled={!hasSelected}
          loading={loading_out_to_first}
          style={{ marginLeft: 20, marginTop: 20 }}
        >
          导出到初筛
        </Button>
        <Button
          type="primary"
          onClick={this.outToLocal}
          disabled={!hasSelected}
          loading={loading_out_to_local}
          style={{ marginLeft: 20, marginTop: 20 }}
        >
          导出到本地
        </Button>
        <Button type="primary" onClick={() => this.showAddModal(true)} style={{ marginLeft: 20, marginTop: 20 }}>
          添加化合物
        </Button>
        <span style={{ marginLeft: 8 }}>
          {hasSelected ? `选中 ${selectedRowKeys.length} 个` : ""}
        </span>

        <div>
          <Modal
            title=" 查看 "
            centered
            visible={this.state.showViewModal}
            onOk={() => this.showViewModal(false)}
            onCancel={() => this.showViewModal(false)}
            maskClosable={false}
          >
            <Form {...formItemLayoutt} onSubmit={this.onSubmit} colon={false}>
              <div style={{ display: "flex" }}>
                <span style={{ flex: 1 }}>
                  <Item label="任务编号">
                      <Input readOnly defaultValue={this.state.viewData.id } />
                  </Item>
                  <Item label="化合物编号">
                      <Input readOnly defaultValue={this.state.viewData.hhw_id } />
                  </Item>
                  <Item label="化合物原编号">
                      <Input readOnly defaultValue={this.state.viewData.hhw_original_id } />
                  </Item>
                  <Item label="化合物中文名称">
                      <Input readOnly defaultValue={this.state.viewData.compound_chinese } />
                  </Item>
                  <Item label="化合物英文名称">
                      <Input readOnly defaultValue={this.state.viewData.compound_english } />
                  </Item>
                  <Item label="化合物结构式" style={{ marginTop: 4 }}>
                      <Input readOnly defaultValue={this.state.viewData.compound_structure } />
                  </Item>
                  <Item label="化合物分子式">
                      <Input readOnly defaultValue={this.state.viewData.compound_fzs } />
                  </Item>
                  <Item label="化合物分子量">
                      <Input readOnly defaultValue={this.state.viewData.compound_fzl } />
                  </Item>
                  <Item label="结构类型">
                      <Input readOnly defaultValue={this.state.viewData.compound_jglx } />
                  </Item>
                  <Item label="化合物来源">
                      <Input readOnly defaultValue={this.state.viewData.compound_type } />
                  </Item>
                  <Item label="筛选菌株编号">
                      <Input readOnly defaultValue={this.state.viewData.sxjj_id } />
                  </Item>
                  <Item label="菌株保藏编号">
                      <Input readOnly defaultValue={this.state.viewData.jzbc_id } />
                  </Item>
                  <Item label="发酵培养基">
                      <Input readOnly defaultValue={this.state.viewData.f_pyjid } />
                  </Item>
                  <Item label="发酵条件">
                      <Input readOnly defaultValue={this.state.viewData.f_tj } />
                  </Item>
                  <Item label="谱图信息" style={{ marginTop: 4 }}>
                      <Input readOnly defaultValue={this.state.viewData.spectrogram_info } />
                  </Item>
                </span>
                <span style={{ flex: 1 }}>
                  <Item label="化合物药理活性">
                      <Input readOnly defaultValue={this.state.viewData.compound_activity } />
                  </Item>
                  <Item label="入库时间">
                      <Input readOnly defaultValue={this.state.viewData.compound_intime } />
                  </Item>
                  <Item label="提供者单位">
                      <Input readOnly defaultValue={this.state.viewData.provider_unit } />
                  </Item>
                  <Item label="提供者">
                      <Input readOnly defaultValue={this.state.viewData.provider } />
                  </Item>
                  <Item label="提供者电子邮箱">
                      <Input readOnly defaultValue={this.state.viewData.provider_email } />
                  </Item>
                  <Item label="提供者电话">
                      <Input readOnly defaultValue={this.state.viewData.provider_tel } />
                  </Item>
                  <Item label="化合物纯度">
                      <Input readOnly defaultValue={this.state.viewData.compound_cd } />
                  </Item>
                  <Item label="化合物重量" style={{ display: "flex" }}>
                      <Input readOnly defaultValue={this.state.viewData.compound_weight } />
                  </Item>
                  <Item label="化合物浓度">
                      <Input readOnly defaultValue={this.state.viewData.compound_concentration } />
                  </Item>
                  <Item label="化合物体积" style={{ display: "flex" }}>
                      <Input readOnly defaultValue={this.state.viewData.compound_purity } />
                  </Item>
                  <Item label="母板存放位置">
                      <Input readOnly defaultValue={this.state.viewData.compound_mom_place } />
                  </Item>
                  <Item label="子板存放位置">
                      <Input readOnly defaultValue={this.state.viewData.compound_son_place } />
                  </Item>
                  <Item label="入库时间">
                      <Input readOnly defaultValue={this.state.viewData.compound_intime } />
                  </Item>
                  <Item label="工作人员姓名">
                      <Input readOnly defaultValue={this.state.viewData.worker } />
                  </Item>
                  <Item label="备注">
                      <TextArea  autosize={{ minRows: 2 }} readOnly defaultValue={this.state.viewData.compound_remark } />
                  </Item>
                </span>
              </div>
            </Form>
          </Modal>
          <Modal
            title="修改"
            centered
            visible={this.state.showEditModal}
            onOk={() => this.showEditModal(false)}
            onCancel={() => this.showEditModal(false)}
            maskClosable={false}
          >
            <Form {...formItemLayoutt} onSubmit={this.onSubmit} colon={false}>
              <div style={{ display: "flex" }}>
                <span style={{ flex: 1 }}>
                  <Item label="任务编号">
                      <Input readOnly defaultValue={this.state.editData.id } />
                  </Item>
                  <Item label="化合物编号">
                      <Input defaultValue={this.state.editData.hhw_id } onChange={e => this.state.editData.hhw_id = e.target.value} />
                  </Item>
                  <Item label="化合物原编号">
                      <Input defaultValue={this.state.editData.hhw_original_id } onChange={e => this.state.editData.hhw_original_id = e.target.value} />
                  </Item>
                  <Item label="化合物中文名称">
                      <Input defaultValue={this.state.editData.compound_chinese } onChange={e => this.state.editData.compound_chinese = e.target.value} />
                  </Item>
                  <Item label="化合物英文名称">
                      <Input defaultValue={this.state.editData.compound_english } onChange={e => this.state.editData.compound_english = e.target.value} />
                  </Item>
                  <Item label="化合物结构式" style={{ marginTop: 4 }}>


                  <Input id="compound_structure_edit" type="file" style={{display: 'none'}} onChange={env => this.selectFile(env, 'compound_structure_edit_s')}  />
                    <Search
                      placeholder=""
                      id="compound_structure_edit_s"
                      enterButton="上传"
                      onSearch={value => document.getElementById("compound_structure_edit").click()}
                    />      

                    <Upload
                      beforeUpload={this.beforeUpload}
                      fileList={this.state.editData.compound_structure}
                      style={{ display: "none" }}
                      onChange={this.changeFileCompoundStructure}
                      showUploadList={true}
                    >
                      <Button style={{backgroundColor: "#1890ff", borderColor: "#1890ff", color: "#fff"}} >
                        上传
                      </Button>
                    </Upload>
                  </Item>
                  <Item label="化合物分子式">
                      <Input defaultValue={this.state.editData.compound_fzs  } onChange={e => this.state.editData.compound_fzs  = e.target.value} />
                  </Item>
                  <Item label="化合物分子量">
                      <Input defaultValue={this.state.editData.compound_fzl  } onChange={e => this.state.editData.compound_fzl  = e.target.value} />
                  </Item>
                  <Item label="结构类型">
                      <Input defaultValue={this.state.editData.compound_jglx } onChange={e => this.state.editData.compound_jglx = e.target.value} />
                  </Item>
                  <Item label="化合物来源">
                      <Input defaultValue={this.state.editData.compound_type  } onChange={e => this.state.editData.compound_type  = e.target.value} />
                  </Item>
                  <Item label="筛选菌株编号">
                      <Input defaultValue={this.state.editData.sxjj_id } onChange={e => this.state.editData.sxjj_id = e.target.value} />
                  </Item>
                  <Item label="菌株保藏编号">
                      <Input defaultValue={this.state.editData.jzbc_id } onChange={e => this.state.editData.jzbc_id = e.target.value} />
                  </Item>
                  <Item label="发酵培养基">
                      <Input defaultValue={this.state.editData.f_pyjid } onChange={e => this.state.editData.f_pyjid = e.target.value} />
                  </Item>
                  <Item label="发酵条件">
                      <Input defaultValue={this.state.editData.f_tj  } onChange={e => this.state.editData.f_tj  = e.target.value} />
                  </Item>
                  <Item label="谱图信息" style={{ marginTop: 4 }}>


                  <Input id="spectrogram_info_edit" type="file" style={{display: 'none'}} onChange={env => this.selectFile(env, 'spectrogram_info_edit_s')}  />
                    <Search
                      placeholder=""
                      id="spectrogram_info_edit_s"
                      enterButton="上传"
                      onSearch={value => document.getElementById("spectrogram_info_edit").click()}
                    />      

                    <Upload
                        fileList={this.state.editData.spectrogram_info }
                        style={{ display: "none" }}
                        beforeUpload={this.beforeUpload}
                        onChange={this.changeFileSpectrogramInfo}
                        showUploadList={true}
                      >
                        <Button style={{backgroundColor: "#1890ff", borderColor: "#1890ff", color: "#fff"}} >
                          上传
                        </Button>
                      </Upload>
                  </Item>
                </span>
                <span style={{ flex: 1 }}>
                  <Item label="化合物药理活性">
                      <Input defaultValue={this.state.editData.compound_activity  } onChange={e => this.state.editData.compound_activity  = e.target.value} />
                  </Item>
                  <Item label="入库时间">
                    <DatePicker
                      style={{ width: "100%" }}
                      defaultValue={moment(this.state.editData.compound_intime)  }
                      onChange={(date, dateStr) => this.state.editData.compound_intime  = dateStr}
                      format={'YYYY-MM-DD HH:mm:ss'}
                      dateRender={current => {
                        const style = {};
                        if (current.date() === 1) {
                          style.border = "1px solid #1890ff";
                          style.borderRadius = "50%";
                        }
                        return (
                          <div className="ant-calendar-date" style={style}>
                            {current.date()}
                          </div>
                        );
                      }}
                    />
                  </Item>
                  <Item label="提供者单位">
                      <Input defaultValue={this.state.editData.provider_unit  } onChange={e => this.state.editData.provider_unit  = e.target.value} />
                  </Item>
                  <Item label="提供者">
                      <Input defaultValue={this.state.editData.provider  } onChange={e => this.state.editData.provider  = e.target.value} />
                  </Item>
                  <Item label="提供者电子邮箱">
                      <Input defaultValue={this.state.editData.provider_email  } onChange={e => this.state.editData.provider_email  = e.target.value} />
                  </Item>
                  <Item label="提供者电话">
                      <Input defaultValue={this.state.editData.provider_tel  } onChange={e => this.state.editData.provider_tel  = e.target.value} />
                  </Item>
                  <Item label="化合物纯度">
                    <Select
                      // mode="tags"
                      defaultValue={this.state.editData.compound_cd }
                      onChange={value => this.state.editData.compound_cd  = value}
                      style={{ width: "100%" }}
                      tokenSeparators={[","]}
                      showArrow={true}
                    >
                      <Option value="95">95%</Option>
                      <Option value="90">90%</Option>
                      <Option value="85">85%</Option>
                      <Option value="80">80%</Option>
                    </Select>
                  </Item>
                  <Item label="化合物重量" style={{ display: "flex" }}>
                    <Input style={{ width: "70%" }}  defaultValue={this.state.editData.compound_weight   } onChange={e => this.state.editData.compound_weight   = e.target.value} />
                    <InputGroup compact style={{ width: "30%" }}>
                      <Select 
                        style={{ width: "100%" }}
                        defaultValue={this.state.editData.compound_weight_unit }
                        onChange={value => this.state.editData.compound_weight_unit  = value}
                        >
                        <Option value="mg">mg</Option>
                        <Option value="g">g</Option>
                      </Select>
                    </InputGroup>
                  </Item>
                  <Item label="化合物浓度">
                    <Select
                      // mode="tags"
                      defaultValue={this.state.editData.compound_concentration  }
                      onChange={value => this.state.editData.compound_concentration   = value}
                      style={{ width: "100%" }}
                      tokenSeparators={[","]}
                      showArrow={true}
                    >
                    <Option value="128">12.8mg/ml%</Option>
                    <Option value="64">6.4mg/ml%</Option>
                    <Option value="32">3.2mg/ml%</Option>
                    <Option value="16">1.6 mg/ml%</Option>
                    <Option value="100">100mM</Option>
                    <Option value="10">10mM</Option>
                    </Select>
                  </Item>
                  <Item label="化合物体积" style={{ display: "flex" }}>
                    <Input style={{ width: "70%" }}  defaultValue={this.state.editData.compound_purity } onChange={e => this.state.editData.compound_purity = e.target.value} />
                    <InputGroup compact style={{ width: "30%" }}>
                      <Select style={{ width: "100%" }}
                        defaultValue={this.state.editData.compound_purity_unit }
                        onChange={value => this.state.editData.compound_purity_unit  = value}
                        >
                        <Option value="μl">μl</Option>
                        <Option value="ml">ml</Option>
                      </Select>
                    </InputGroup>
                  </Item>
                  <Item label="母板存放位置">
                    <Input defaultValue={this.state.editData.compound_mom_place  } onChange={e => this.state.editData.compound_mom_place  = e.target.value} />
                  </Item>
                  <Item label="子板存放位置">
                    <Input defaultValue={this.state.editData.compound_son_place  } onChange={e => this.state.editData.compound_son_place  = e.target.value} />
                  </Item>
                  <Item label="备注">
                    <TextArea autosize={{ minRows: 2 }} defaultValue={this.state.editData.compound_remark  } onChange={e => this.state.editData.compound_remark  = e.target.value} />
                  </Item>
                  <Button type="primary" onClick={this.handleUpdate} style={{marginLeft:'200px'}}>保存</Button>
                </span>
              </div>
            </Form>
          </Modal>
          <Modal
            title="添加"
            centered
            visible={this.state.showAddModal}
            onOk={() => this.showAddModal(false)}
            onCancel={() => this.showAddModal(false)}
            maskClosable={false}
          >
            <Form {...formItemLayoutt} onSubmit={this.onSubmit} colon={false}>
              <div style={{ display: "flex" }}>
              <span style={{ flex: 1 }}>
                  <Item label="任务编号">
                      <Input onChange={e => this.state.newData.id = e.target.value} />
                  </Item>
                  <Item label="化合物编号">
                      <Input onChange={e => this.state.newData.hhw_id = e.target.value} />
                  </Item>
                  <Item label="化合物原编号">
                      <Input onChange={e => this.state.newData.hhw_original_id = e.target.value} />
                  </Item>
                  <Item label="化合物中文名称">
                      <Input onChange={e => this.state.newData.compound_chinese = e.target.value} />
                  </Item>
                  <Item label="化合物英文名称">
                      <Input onChange={e => this.state.newData.compound_english = e.target.value} />
                  </Item>
                  <Item label="化合物结构式" style={{ marginTop: 4 }}>



                    <Input id="compound_structure_new" type="file" style={{display: 'none'}} onChange={env => this.selectFile(env, 'compound_structure_new_s')}  />
                    <Search
                      placeholder=""
                      id="compound_structure_new_s"
                      enterButton="上传"
                      onSearch={value => document.getElementById("compound_structure_new").click()}
                    />          

                    <Upload
                      fileList={this.state.newData.compound_structure}
                      style={{ display: "none" }}
                      beforeUpload={this.beforeUpload}
                      onChange={this.changeFileCompoundStructure}
                      showUploadList={true}
                    >
                      <Button style={{backgroundColor: "#1890ff", borderColor: "#1890ff", color: "#fff"}} >
                        上传
                      </Button>
                    </Upload>
                  </Item>
                  <Item label="化合物分子式">
                      <Input onChange={e => this.state.newData.compound_fzs  = e.target.value} />
                  </Item>
                  <Item label="化合物分子量">
                      <Input onChange={e => this.state.newData.compound_fzl  = e.target.value} />
                  </Item>
                  <Item label="结构类型">
                      <Input onChange={e => this.state.newData.compound_jglx = e.target.value} />
                  </Item>
                  <Item label="化合物来源">
                      <Input onChange={e => this.state.newData.compound_type  = e.target.value} />
                  </Item>
                  <Item label="筛选菌株编号">
                      <Input onChange={e => this.state.newData.sxjj_id = e.target.value} />
                  </Item>
                  <Item label="菌株保藏编号">
                      <Input onChange={e => this.state.newData.jzbc_id = e.target.value} />
                  </Item>
                  <Item label="发酵培养基">
                      <Input onChange={e => this.state.newData.f_pyjid = e.target.value} />
                  </Item>
                  <Item label="发酵条件">
                      <Input onChange={e => this.state.newData.f_tj  = e.target.value} />
                  </Item>
                  <Item label="谱图信息" style={{ marginTop: 4 }}>

                    <Input id="spectrogram_info_new" type="file" style={{display: 'none'}} onChange={env => this.selectFile(env, 'spectrogram_info_new_s')}  />
                    <Search
                      placeholder=""
                      id="spectrogram_info_new_s"
                      enterButton="上传"
                      onSearch={value => document.getElementById("spectrogram_info_new").click()}
                    />          
                   
                    <Upload
                        fileList={this.state.newData.spectrogram_info }
                        // style={{ display: "flex" }}
                        style={{ display: "none" }}
                        beforeUpload={this.beforeUpload}
                        onChange={this.changeFileSpectrogramInfo}
                        showUploadList={true}
                      >
                        <Button style={{backgroundColor: "#1890ff", borderColor: "#1890ff", color: "#fff"}} >
                          上传
                        </Button>
                      </Upload>
                     
                  </Item>
                </span>
                <span style={{ flex: 1 }}>
                  <Item label="化合物药理活性">
                      <Input onChange={e => this.state.newData.compound_activity  = e.target.value} />
                  </Item>
                  <Item label="入库时间">
                    <DatePicker
                      style={{ width: "100%" }}
                      format={'YYYY-MM-DD HH:mm:ss'}
                      onChange={(date, dateStr) => this.state.newData.compound_intime  = dateStr}
                      dateRender={current => {
                        const style = {};
                        if (current.date() === 1) {
                          style.border = "1px solid #1890ff";
                          style.borderRadius = "50%";
                        }
                        return (
                          <div className="ant-calendar-date" style={style}>
                            {current.date()}
                          </div>
                        );
                      }}
                    />
                  </Item>
                  <Item label="提供者单位">
                      <Input onChange={e => this.state.newData.provider_unit  = e.target.value} />
                  </Item>
                  <Item label="提供者">
                      <Input onChange={e => this.state.newData.provider  = e.target.value} />
                  </Item>
                  <Item label="提供者电子邮箱">
                      <Input onChange={e => this.state.newData.provider_email  = e.target.value} />
                  </Item>
                  <Item label="提供者电话">
                      <Input onChange={e => this.state.newData.provider_tel  = e.target.value} />
                  </Item>
                  <Item label="化合物纯度">
                    <Select
                      // mode="tags"
                      onChange={value => this.state.newData.compound_cd  = value}
                      style={{ width: "100%" }}
                      tokenSeparators={[","]}
                      showArrow={true}
                    >
                      <Option value="95">95%</Option>
                      <Option value="90">90%</Option>
                      <Option value="85">85%</Option>
                      <Option value="80">80%</Option>
                    </Select>
                  </Item>
                  <Item label="化合物重量" style={{ display: "flex" }}>
                    <Input style={{ width: "70%" }}  onChange={e => this.state.newData.compound_weight   = e.target.value} />
                    <InputGroup compact style={{ width: "30%" }}>
                      <Select 
                        style={{ width: "100%" }}
                        onChange={value => this.state.newData.compound_weight_unit  = value}
                        >
                        <Option value="mg">mg</Option>
                        <Option value="g">g</Option>
                      </Select>
                    </InputGroup>
                  </Item>
                  <Item label="化合物浓度">
                    <Select
                      // mode="tags"
                      onChange={value => this.state.newData.compound_concentration   = value}
                      style={{ width: "100%" }}
                      tokenSeparators={[","]}
                      showArrow={true}
                    >
                    <Option value="128">12.8mg/ml%</Option>
                    <Option value="64">6.4mg/ml%</Option>
                    <Option value="32">3.2mg/ml%</Option>
                    <Option value="16">1.6 mg/ml%</Option>
                    <Option value="100">100mM</Option>
                    <Option value="10">10mM</Option>
                    </Select>
                  </Item>
                  <Item label="化合物体积" style={{ display: "flex" }}>
                    <Input style={{ width: "70%" }}  onChange={e => this.state.newData.compound_purity = e.target.value} />
                    <InputGroup compact style={{ width: "30%" }}>
                      <Select style={{ width: "100%" }}
                        onChange={value => this.state.newData.compound_purity_unit  = value}
                        >
                        <Option value="μl">μl</Option>
                        <Option value="ml">ml</Option>
                      </Select>
                    </InputGroup>
                  </Item>
                  <Item label="母板存放位置">
                    <Input onChange={e => this.state.newData.compound_mom_place  = e.target.value} />
                  </Item>
                  <Item label="子板存放位置">
                    <Input onChange={e => this.state.newData.compound_son_place  = e.target.value} />
                  </Item>
                  <Item label="备注">
                    <TextArea autosize={{ minRows: 2 }} onChange={e => this.state.newData.compound_remark  = e.target.value} />
                  </Item>
                  <Button type="primary" onClick={this.handleAdd} style={{marginLeft:'200px'}}>保存</Button>
                </span>                
              </div>
            </Form>
          </Modal>
        </div>
        <Table
          rowSelection={rowSelection}
          bordered={true}
          columns={columns}
          dataSource={this.state.dataSource}
          onChange={this.handleChange}
          // pagination={{ pageSize: 20 }} //设置第一页默认显示的列
          scroll={{ x: 4000, y: 300 }}
        />
      </div>
    );
  }
}
const WrapperedQuery_mediumForm = Form.create({
  name: "query medium"
})(Query_mediumForm);

class CompoundInfo extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  onSubmit = () => {
    const { form } = this.form.props;
    form.validateFields((errs, values) => {
      console.log(errs, values);
    });
  };
  render() {
    return (
      <Content>
        <WrapperedQuery_mediumForm
          wrappedComponentRef={ref => (this.form = ref)}
          onSubmit={this.onSubmit}
        />
      </Content>
    );
  }
}

export default CompoundInfo;
